<main class="app-content">
  <div class="mb-4">
    <span *ngIf="isAdmin" class="btn-style" (click)="onopenAdd()">新建人员</span>
  </div>
  <div>
    <li class="mb-3 list-title">人员列表</li>
  </div>
  <div class="tables">
  <div class="grid">
    <table mat-table [dataSource]="users | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-hover table-bordered w-100">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event? allToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (change)="$event ? selection.toggle(row): null"
                        (click)="$event.stopPropagation()"
                        [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <!--<ng-container matColumnDef="username">-->
        <!--<th mat-header-cell *matHeaderCellDef>用户名</th>-->
        <!--<td mat-cell *matCellDef="let row ">{{ row.username }}</td>-->
      <!--</ng-container>-->

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>姓名</th>
        <td mat-cell *matCellDef="let row ">{{ row.realName }}</td>
      </ng-container>

      <ng-container matColumnDef="brand">
        <th mat-header-cell *matHeaderCellDef>邮箱</th>
        <td mat-cell *matCellDef="let row">{{ row.email }}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>电话</th>
        <td mat-cell *matCellDef="let row">{{ row.phone }}</td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>职位</th>
        <td mat-cell *matCellDef="let row">{{ row.job }}</td>
      </ng-container>

      <ng-container matColumnDef="createDate">
        <th mat-header-cell *matHeaderCellDef>部门</th>
        <td mat-cell *matCellDef="let row">{{ row.sysDepartment?.departName }}</td>
      </ng-container>

      <ng-container matColumnDef="department">
        <th mat-header-cell *matHeaderCellDef>住址</th>
        <td mat-cell *matCellDef="let row">{{ row.address }}</td>
      </ng-container>

      <ng-container matColumnDef="seatNum">
        <th mat-header-cell *matHeaderCellDef>座位号</th>
        <td mat-cell *matCellDef="let row">{{ row.seatNum }}</td>
      </ng-container>



      <ng-container matColumnDef="operate">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let row">
          <button mat-button (click)="onOpenEdit(row)">编辑</button>
          <button mat-button (click)="onDeleteuser(row.id)">删除</button>
          <button *ngIf="isAdmin" mat-button (click)="onResetuser(row.id)">重置</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="cols"></tr>
      <tr mat-row *matRowDef="let data; columns: cols"></tr>

    </table>

    <app-pagination
      (pageChange)="onPageChanged($event)"
      [maxSize]="9"
      [isShowInput]="true"
      [isMiniMode]="false"
      [isShowPage]="true"
      [total]="total"
    >
    </app-pagination>
  </div>
</div>
</main>
